<template>
	<view class="entering-container">
		<view class="title">录入订单 </view>

		<view class="content">
			<view class="form-item">
				<view class="label">选择商品：</view>
				<view class="inputValue">
					<!-- <input type="text" :disable="true" /> -->
					<view class="btn" @click="handlerChooseClick">选择</view>
				</view>
			</view>
			<view class="form-item">
				<view class="label">已选商品：</view>
				<view class="inputValue for-goods">
					<view class="iv-item" v-for="(item, id) in goods_lists">
						<image :src="item.pic" mode="scaleToFill" />
						<text class="ivi-title">{{ item.name }}</text>
						<view class="ivi-close" @tap="removeGoods(id)">X</view>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="label">商品总价：</view>
				<view class="inputValue">
					<input type="number" v-model="formData.totalprice" />
				</view>
			</view>

			<!-- 发件人 -->
			<view class="form-item">
				<view class="label">发件人姓名：</view>
				<view class="inputValue">
					<input type="text" v-model="formData.flinkman" />
				</view>
			</view>
			<view class="form-item">
				<view class="label">发件人电话：</view>
				<view class="inputValue">
					<input type="text" v-model="formData.ftel" />
				</view>
			</view>
			<view class="form-item">
				<view class="label">发件人地址：</view>
				<view class="inputValue">
					<input type="text" v-model="formData.faddress" class="longInputClass" />
				</view>
			</view>
			<!-- 收件人 -->
			<view class="form-item">
				<view class="label">收货人姓名：</view>
				<view class="inputValue">
					<input type="text" v-model="formData.linkman" />
				</view>
			</view>
			<view class="form-item">
				<view class="label">收货人电话：</view>
				<view class="inputValue">
					<input type="text" v-model="formData.tel" />
				</view>
			</view>
			<view class="form-item">
				<view class="label">收货地址：</view>
				<view class="inputValue">
					<input type="text" v-model="formData.address" class="longInputClass" />
				</view>
			</view>
			<view class="form-item">
				<view class="label">配送方式：</view>
				<view class="inputValue">
					<input type="text" v-model="formData.freight" />
				</view>
			</view>
			<view class="form-item">
				<view class="label">配送费：</view>
				<view class="inputValue">
					<input type="number" v-model="formData.freightprice" />
				</view>
			</view>
		</view>
		<view class="save" @click="saveClick">
			<text>确定录入</text>
		</view>
		<view class="save red" @click="backOrderCenter" v-if="from_oids.length > 0">
			<text>返回结算中心</text>
		</view>
		<uni-popup ref="popup" type="center" background-color="#fff">
			<view class="popup-content">
				<scroll-view class="list" style="width: 700rpx" scroll-y scroll-x>
					<uni-table style="width: 750rpx" v-if="isShow" border stripe emptyText="暂无更多数据">
						<!-- 表头行 -->
						<uni-tr>
							<uni-th width="50" align="center">ID</uni-th>
							<uni-th width="150" align="center">商品信息</uni-th>
							<uni-th width="80" align="left">状态</uni-th>
							<uni-th width="80" align="left">操作</uni-th>
						</uni-tr>
						<!-- 表格数据行 -->
						<uni-tr v-for="(item, index) in tableData">
							<uni-td>{{ item.id }}</uni-td>
							<uni-td class="info">
								<image class="img" :src="item.pic" mode="scaleToFill" />
								<text>{{ item.name }}</text>
							</uni-td>

							<uni-td>{{ item.status == 1 ? '已上架' : '未上架' }}</uni-td>
							<uni-td>
								<button class="btn" @click="chooseClick(item)" type="params">选择</button>
							</uni-td>
						</uni-tr>
					</uni-table>
					<uni-table
						style="width: 750rpx"
						class="table"
						v-else
						border
						stripe
						emptyText="暂无更多数据"
					>
						<!-- 表头行 -->
						<uni-tr>
							<uni-th width="150" align="center">规格</uni-th>
							<uni-th width="80">库存</uni-th>
							<uni-th width="100" align="left">销售价</uni-th>
							<uni-th width="100" align="left">购买数量</uni-th>
							<uni-th width="80" align="left">操作</uni-th>
						</uni-tr>
						<!-- 表格数据行 -->
						<uni-tr v-for="(item, index) in tableData2" :index="index">
							<uni-td>{{ guigename }}</uni-td>

							<uni-td style="text-align: center">{{ item.stock }}</uni-td>
							<uni-td>{{ item.market_price }}</uni-td>
							<uni-td>
								<input type="number" v-model="num[index]" class="inputClass" />
							
							</uni-td>
							<uni-td>
								<view class="btn" @click="confirm(item,index)">确定</view>
							</uni-td>
						</uni-tr>
					</uni-table>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
var app = getApp()
export default {
	data() {
		return {
			guigename: '',
			formData: {
				mid: '',
				goodsprice: 0,
				linkman: '',
				tel: '',
				address: '',
				flinkman: '',
				ftel: '',
				faddress: '',
				freight: '商家配送',
				freightprice: 0,
				prodata: '', //商品id
				paytype: '线下支付',
				paytime: '',
				prodata: '',
				totalprice: ''
			},
			goods_lists: {},
			goods_lists2: [],
			cur_goods_idx: 0,
			titleList: [
				{
					name: 'ID'
				},
				{
					name: '商品信息'
				},
				{
					name: '创建时间'
				},
				{
					name: '状态'
				},
				{
					name: '操作'
				}
			],
			isShow: true,
			tableData: [],
			tableData2: [],
			num: [],
			goodImgData: {},
			from_oids: []
		}
	},
	onLoad(options) {
		options = options || {}
		this.from_oids = options.from_oids ? options.from_oids.split(',') : []
		this.getId()
	},
	methods: {
		confirm(item,index) {
			console.log(this.num)
			this.goods_lists[this.cur_goods_idx].num = this.num[index]
			this.goods_lists[this.cur_goods_idx].guige_id = item.id
			
			for (var idx in this.tableData2) {			
				var _item = this.tableData2[idx]
				this.goods_lists2.push(_item)
				//三元表达式判断是否有num 如果有则赋值给num 如果没有则赋值为0
				this.goods_lists2[idx].num = this.num[idx]>0?this.num[idx]:0
				this.goods_lists2[idx].guige_id = item.id
			}
			this.updateStatis()
			//this.formData.totalprice = item.market_price * this.num;
			//this.formData.goodsprice = item.market_price * this.num;
			this.$refs.popup.close()
			console.log(this.goods_lists2)
			console.log(item)
		},
		backOrderCenter() {
			app.goto('/pagesExt/my/payorder')
		},
		updateStatis() {
			this.formData.totalprice = 0
			this.formData.goodsprice = 0
			console.log(this.formData)
			
			for (var idx in this.goods_lists2) {
				var _item = this.goods_lists2[idx]
				this.formData.totalprice += _item.market_price * _item.num
				this.formData.goodsprice += _item.market_price * _item.num
				console.log(_item)
				
			}
console.log(this.formData.goodsprice)
			this.goods_lists2 = []
		},
		removeGoods(id) {
			app.confirm('确定移除吗?', () => {
				delete this.goods_lists[id]
				this.updateStatis()
			})
		},
		getId() {
			const { id } = uni.getStorageSync('user')
			this.formData.mid = id
		},
		handlerChooseClick() {
			//console.log(app.globalData.pre_url);
			this.$refs.popup.open()
			this.isShow = true
			app.get('ApiFinance/getsplist', {}, (customs) => {
				console.log(customs, 'customs')
				this.tableData = customs.data
				console.log(customs.data, 'data')
			})
		},
		searchClick() {},
		saveClick() {
			let that = this
			this.formData.paytime = Date.now()

			this.formData.prodata = []
			for (var idx in this.goods_lists) {
				var _item = this.goods_lists[idx]
				this.formData.prodata.push(_item.id + ',' + _item.guige_id + ',' + _item.num)
			}
			this.formData.prodata = this.formData.prodata.join('-')

			console.log(' ', this.formData)

			app.post(
				'ApiFinance/save',
				{
					...this.formData
				},
				(res) => {
					console.log(res)
					if (res.status == 0) {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							mask: true
						})
						return
					}

					var oids = []
					if (that.from_oids && that.from_oids.length > 0) {
						for (var idx in that.from_oids) {
							oids.push(that.from_oids[idx])
						}
					}
					oids.push(res.msg)

					uni.setStorageSync('tmp_oids', oids.join(','))

					setTimeout(() => {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							mask: true
						})
						app.goto('/pages/my/payorder')
					}, 150)
				}
			)
		},
		chooseClick(item) {
			//console.log(item);
			const { id } = item
			this.goods_lists[id] = item
			this.cur_goods_idx = id
			this.goodImgData = item
			this.isShow = false
			app.post(
				'ApiFinance/getproduct',
				{
					proid: id
				},
				(customs) => {
					this.tableData2 = customs.gglist
					this.guigename = customs.guigedata[0].items[0].title
					console.log(customs, 'customs')
				}
			)
		}
	}
}
</script>

<style lang="scss" scoped>
page {
	background-color: #fff;
}

.entering-container {
	padding: 20rpx;
	box-sizing: border-box;

	.title {
		font-size: 30rpx;
		font-weight: bold;
		border-bottom: 2rpx solid #f1f1f1;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.content {
		.form-item {
			display: flex;
			// justify-content: flex-end;
			padding: 20rpx 30rpx;
			box-sizing: border-box;

			.label {
				font-size: 26rpx;
				font-weight: 400;
				width: 160rpx;
				flex-shrink: 0;
			}

			.inputValue {
				display: flex;

				image {
					width: 100rpx;
					height: 100rpx;
				}

				input {
					border: 1rpx solid #e4e4e4;
					height: 60rpx;
					padding: 10rpx;
					box-sizing: border-box;
					width: 280rpx;
					font-size: 20rpx;
					margin-right: 20rpx;
				}

				.longInputClass {
					width: 400rpx;
				}

				.btn {
					font-size: 26rpx;
					font-weight: 400;
					border: 1rpx solid #e4e4e4;
					text-align: center;
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 10rpx;
					box-sizing: border-box;
				}
			}
		}
	}

	.iv-item {
		width: 30%;
		display: flex;
		flex-direction: column;
		border: 0.01rem solid #e7e7e7;
		justify-content: center;
		text-align: center;
		position: relative;
		margin-right: 0.5rem;
		float: left;
		margin-bottom: 0.8rem;
	}

	.iv-item image {
		width: 3rem;
		height: 3rem;
		margin-left: auto;
		margin-right: auto;
		padding: 0.25rem;
	}

	.ivi-title {
		text-align: center;
		border-top: 0.01rem solid #dddddd;
		background-color: #e3e3e3;
	}

	.ivi-close {
		width: 1rem;
		height: 1rem;
		position: absolute;
		right: -0.5rem;
		top: -0.5rem;
		background-color: red;
		color: white;
		text-align: center;
		line-height: 1rem;
		border-radius: 0.25rem;
		z-index: 1;
	}

	.ivi-close:active {
		background-color: darkred;
	}

	.inputValue.for-goods {
		height: auto;
		display: block !important;
		width: 100%;
	}

	.save {
		width: 400rpx;
		height: 80rpx;
		font-size: 26rpx;
		color: #fff;
		background-color: #334ed1;
		border-radius: 60rpx;
		text-align: center;
		margin: 50rpx auto;
		line-height: 80rpx;
	}

	.save.red {
		background-color: red;
	}

	.popup-content {
		background-color: #fff;
		// width: 600rpx;
		border-radius: 30rpx;

		.search {
			height: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			input {
				border-radius: 20rpx;
				height: 60rpx;
				box-sizing: border-box;
				padding: 10rpx;
				border: 1rpx solid #e4e4e4;
			}

			display: flex;

			.name {
				font-size: 28rpx;
				margin-left: 20rpx;
			}
		}

		.list {
			width: 700rpx;
			height: 900rpx;
			padding: 30rpx 0;
			box-sizing: border-box;

			.inputClass {
				display: flex;
				width: 80rpx;
				border: 1rpx solid #e4e4e4;
			}

			.img {
				width: 100rpx;
				height: 100rpx;
			}

			.info {
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.btn {
				padding: 8rpx;
				box-sizing: border-box;
				font-size: 24rpx;
				border: 1rpx solid #ccc;
				border-radius: 10rpx;
				text-align: center;
			}

			.table {
				height: 100%;
			}
		}
	}
}
</style>
